<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
        vue中提供了监听器  可以监听指定的属性  当属性发生改变时 则执行监听器中定义的代码

        计算属性 vs 监听器
        1.  两者都能监听属性值的改变  计算属性能完成的操作使用监听器也可以实现
        2. 后续如果需要再某个属性改变时发送异步请求 则使用watch监听会更好 watch支持异步操作    ajax  同步

-->

<div id="app">
    <p><input type="text" placeholder="firstName" v-model="firstName"></p>
    <p><input type="text" placeholder="lastName" v-model="lastName"></p>
    <p>{{fName}}</p>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            firstName: 'zhang',
            lastName: 'san',
            fName:''
        },
        computed: {
            //  计算属性也可以起到属性监听作用  只要参与运算的属性值改变了  计算属性会重新计算
            // fullName() {
            //     console.log('fullName')
            //     return this.firstName + this.lastName
            // }
        },
        //    监听器
        watch:{
            // 监听firstName属性值的改变
            firstName(newVal,oldVal){
                this.fName = newVal + this.lastName
            },
            lastName(newVal,oldVal){
                this.fName = this.firstName + newVal
            }
        }
    })
</script>
</body>
</html>